<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../scss/iconfont.scss">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
</head>

<body>
    <div class="web">
        <div class="mushroom animate__animated animate__swing"><img src="../img/pagedecorate1_03.jpg"> </div>
        <div class="game animate__animated animate__swing"><img src="../img/pagedecorate2_03.jpg"></div>
        <div class="arrows animate__animated animate__shakeY"><img src="../img/pagedecorate3_06.jpg"></div>
        <div class="face animate__animated animate__shakeY"><img src="../img/pagedecorate4_10.jpg"></div>
        <div class="ghost animate__animated animate__rubberBand"><img src="../img/pagedecorate5_13.jpg"></div>
        <div class="photo animate__animated animate__rubberBand"><img src="../img/pagedecorate6_15.jpg"></div>
        <header>
            <span><img src="../img/logo.png" class="animate__animated animate__heartBeat"></span>
            <nav>
                <ul>
                    <li>
                        <a href="./index.html">首页
                        <p>home</p>
                    </a>
                    </li>
                    <li>
                        <a href="./list.html">游戏
                        <p>game</p>
                    </a>
                    </li>
                    <li>
                        <a href="./case.html">案例
                        <p>Case</p>
                    </a>
                    </li>
                    <li>
                        <a href="./person.html">关于我们
                        <p>About us</p>
                    </a>
                    </li>
                    <span><img src="../img/pagewechat.png"></span>
                </ul>

            </nav>
        </header>
        <main>
            <div class="black">
                <div class="left">
                    <div class="top">
                        <img src="../img/pagehand.png">
                        <p>试玩游戏</p>
                    </div>
                    <div class="bottom">
                        <span><a href=""><img src="../img/page1.png"></a></span>
                        <span><a href=""><img src="../img/page2.png"></a></span>
                        <span><a href=""><img src="../img/page3.png"></a></span>
                        <span><a href=""><img src="../img/page4.png"></a></span>
                    </div>
                </div>
                <div class="middle">
                    <span> <img src="../img/pagephone.png" ></span>
                </div>

                <div class="right">
                    <div class="top">
                        <h2>我们能给</h2>
                        <h1>客户带来的利益</h1>
                        <p>每一个细节的处理</p>
                        <p>都体现出我们对时尚的不懈追求</p>

                        <div class="more animate__animated animate__heartBeat">
                            <a href="./inside.html">了解更多</a>
                        </div>
                    </div>
                    <div class="bottom">
                        <span><a href=""><img src="../img/page5.png"></a></span>
                        <span><a href=""><img src="../img/page6.png"></a></span>
                        <span><a href=""><img src="../img/page7.png"></a></span>
                        <span><a href=""><img src="../img/page8.png"></a></span>
                    </div>
                </div>
            </div>
            <div class="step">

                <div class="box">
                    <div class="itemBox wow animate__fadeInLeftBig">
                        <a href="">
                            <span><img src="../img/pagechoice1_07.jpg"></span>
                            <h3>STEP ONE</h3>
                            <p>选择一个游戏，换图</p>
                        </a>
                    </div>
                    <div class="itemBox wow animate__rubberBand">
                        <a href="">
                            <span><img src="../img/pagechoice2_07.jpg"></span>
                            <h3>THE SECOND STEP</h3>
                            <p>选择一个游戏，换图</p>
                        </a>
                    </div>
                    <div class="itemBox  wow animate__fadeInRightBig">
                        <a href="">
                            <span><img src="../img/pagechoice3_07.jpg"></span>
                            <h3>THE THIRD STEP</h3>
                            <p>选择一个游戏，换图</p>
                        </a>
                    </div>
                </div>

            </div>
            <div class="turn">
                <div class="top wow animate__fadeInLeftBig">
                    <div class="left">
                        <h1>狂转游戏</h1>
                        <p class="strong">Turn</p>
                        <p> mad game</p>
                    </div>
                    <div class="right">
                        <p>潮流趣味游戏，引发全民G点，疯狂转发。 还不马上购买，植入你要传播的产品？
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bigBox  wow animate__fadeInRightBig">
                        <div class="smallBox">

                            <div class="shang">
                                <div class="left">
                                    <h4>剑圣传奇</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame1_11.jpg"></div>

                        </div>
                        <div class="smallBox">

                            <div class="shang">
                                <div class="left">
                                    <h4>PLAGUE LNC</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing

                                    ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame2_11.jpg"></div>

                        </div>


                        <div class="smallBox">

                            <div class="shang">
                                <div class="left">
                                    <h4> 地狱边境</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame3_11.jpg"></div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="turn">
                <div class="top wow animate__fadeInLeftBig">
                    <div class="left">
                        <h1>抽奖游戏</h1>
                        <p class="strong">Lottery</p>
                        <p> game</p>
                    </div>
                    <div class="right">
                        <p>形式各样抽奖游戏，引发全民尖叫，惊喜不断。 还不马上购买，植入你要传播的产品？
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bigBox  wow animate__fadeInRightBig">
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>功夫西游</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame4_11.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>宝石迷阵</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                    ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/case5_05.jpg"></div>
                        </div>


                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 植物大战僵尸</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame6_11.jpg"></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="turn">
                <div class="top wow animate__fadeInLeftBig">
                    <div class="left">
                        <h1>经典案例分享</h1>
                        <p class="strong">Lottery</p>
                        <p> game</p>
                    </div>
                    <div class="right">
                        <p>大家对胖糖的信赖， 来源于其产品与需求巧妙结合的经典营销效果。
                        </p>
                    </div>
                </div>
            </div>
            <div class="flying">
                <div class="fly">
                    <div class="left">
                        <img src="../img/pagefly1_03.jpg">
                        <img src="../img/pagefly2_03.jpg">
                        <img src="../img/pagefly3_03.jpg">
                    </div>
                    <div class="zhong">
                        <h3>南方航空</h3>
                        <p>飞行挑战赛</p>
                        <p>2014年5月14日--5月27日</p>
                        <p>扫码关注微信参加飞行挑战赛并抽奖</p>
                        <p>即有机会赢取丰厚奖品</p>
                    </div>
                    <div class="right">
                        <a href=""><img src="../img/pageflylogo_03.jpg"></a>
                    </div>
                </div>
                <div class="fly">
                    <div class="left">
                        <img src="../img/pagefly1_03.jpg">
                        <img src="../img/pagefly2_03.jpg">
                        <img src="../img/pagefly3_03.jpg">
                    </div>
                    <div class="zhong">
                        <h3>南方航空</h3>
                        <p>飞行挑战赛</p>
                        <p>2014年5月14日--5月27日</p>
                        <p>扫码关注微信参加飞行挑战赛并抽奖</p>
                        <p>即有机会赢取丰厚奖品</p>
                    </div>
                    <div class="right">
                        <a href=""><img src="../img/pageflylogo_03.jpg"></a>
                    </div>
                </div>
                <div class="fly">
                    <div class="left">
                        <img src="../img/pagefly1_03.jpg">
                        <img src="../img/pagefly2_03.jpg">
                        <img src="../img/pagefly3_03.jpg">
                    </div>
                    <div class="zhong">
                        <h3>南方航空</h3>
                        <p>飞行挑战赛</p>
                        <p>2014年5月14日--5月27日</p>
                        <p>扫码关注微信参加飞行挑战赛并抽奖</p>
                        <p>即有机会赢取丰厚奖品</p>
                    </div>
                    <div class="right">
                        <a href=""><img src="../img/pageflylogo_03.jpg"></a>
                    </div>
                </div>
                <div class="fly">
                    <div class="left">
                        <img src="../img/pagefly1_03.jpg">
                        <img src="../img/pagefly2_03.jpg">
                        <img src="../img/pagefly3_03.jpg">
                    </div>
                    <div class="zhong">
                        <h3>南方航空</h3>
                        <p>飞行挑战赛</p>
                        <p>2014年5月14日--5月27日</p>
                        <p>扫码关注微信参加飞行挑战赛并抽奖</p>
                        <p>即有机会赢取丰厚奖品</p>
                    </div>
                    <div class="right">
                        <a href=""><img src="../img/pageflylogo_03.jpg"></a>
                    </div>
                </div>
            </div>

        </main>
        <footer>
            <div class="foot">
                <div class="left">
                    <img src="../img/footleft1.png">
                </div>
                <div class="zhong">
                    <p>COPYRIGHT © 2014 PANGTANG. ALL RIGHTS RESERVED. 版权所有</p>
                </div>
                <div class="right "> <img src="../img/footright1.png"></div>
            </div>
        </footer>
    </div>
</body>

</html>